<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <style>
        *{margin: 0;padding: 0}
        .big{font-size: 40px}
    </style>
</head>
<body style="height: 100%">
<p style="word-wrap: break-word;">444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</p>
<script src="jquery-1.8.0.min.js"></script>
<script>
    $(function () {
        var startX,startY,moveEndX,moveEndY,X,Y;
        $("body").on("touchstart", function(e) {

            e.preventDefault();

            startX = e.originalEvent.changedTouches[0].pageX;

            startY = e.originalEvent.changedTouches[0].pageY;


        });

        $("body").on("touchend", function(e) {

            e.preventDefault();

            moveEndX = e.originalEvent.changedTouches[0].pageX;

            moveEndY = e.originalEvent.changedTouches[0].pageY;

            X = moveEndX - startX;

            Y = moveEndY - startY;

            console.log(X);
            console.log(Y);



            if  ( (X < 0 && Y < 0) ||(X <= 0 && Y < 0) || (X > 0 && Y <= 0) ) {

//                alert("放大");
                $("p").addClass("big");
            }

            else
            if  ( (X > 0 && Y > 0) ||(X < 0 && Y > 0) ||(X <= 0 && Y < 0)) {

                $("p").removeClass("big");

            }


        });
    })

</script>
</body>
</html>